<!-- <template>
	<div>

		<el-upload class="upload-demo" :headers="headers" action="http://localhost:8080/house/testUpload"
			:on-preview="handlePreview" :on-success="handleSuccess" :on-remove="handleRemove" :file-list="fileList"
			list-type="picture" multiple>
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
		</el-upload>
		<img src="https://home-y.oss-cn-hangzhou.aliyuncs.com/houseImg/1678183074697_1/img_0.png"/>
		
		<el-upload class="upload-demo" action="#" :on-success="handleSuccess" :on-remove="handleRemove"
			:file-list="fileList" :multiple="true" list-type="picture" :auto-upload="false" ref="upload">
			<el-button size="small" type="primary">点击上传</el-button>
			<div slot="tip" class="el-upload__tip">第一张图片为主图</div>
		</el-upload>
		<el-button type="primary" @click="submitHouse">提交</el-button>
	</div>
</template>
 -->
<template>
	<el-upload :auto-upload="false" multiple accept=".jpg,.png,.doc,.docx,.xlsx,.xls" class="upload-demo" action="#"
		:on-change="uploadChange" :before-remove="beforeRemove" :on-remove="upLoadRemove" :on-preview="downLoadFile"
		:file-list="fileList">
		<el-button size="small" icon="el-icon-plus" slot="trigger">选取文件</el-button>
		<el-button style="margin-left: 10px" size="small" icon="el-icon-upload" type="success" @click="submitUpload"
			:disabled="fileList.length <= 0">上传到服务器</el-button>
		<span slot="tip" class="el-upload__tip">支持jpg,png,doc,docx,xlsx,xls格式文件</span>
	</el-upload>

</template>
<script>
	import axios from 'axios'
	import store from '@/store'
	export default {
		// props: ['add_id'],
		computed: {
			// 这里定义上传文件时携带的参数，即表单数据
			upData: function() {
				return this.form
			}
		},
		data() {
			return {
				formLabelWidth: '80px',
				form: {
					username: '',
					age: ''
				},
				file: {
					fileName: "",
					filePath: "",
				},
				fileList: [],
				formData: [],
				// file:''
			}
		},
		methods: {


			// 拖拽上传
			beforeRemove(file, fileList) {
				this.fileList = fileList;
				// return this.$confirm(`确定移除 ${file.name}？`);
			},
			// 移除附件
			upLoadRemove(file, fileList) {
				let tempFileList = [];
				for (var index = 0; index < this.fileList.length; index++) {
					if (this.fileList[index].name !== file.name) {
						tempFileList.push(this.fileList[index]);
					}
				}
				this.fileList = tempFileList;
			},
			// 监控上传文件列表
			uploadChange(file, fileList) {

				let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);

				// 判断文件名的类型
				if (fileType === 'jpg' || fileType === 'png' || fileType === 'doc' || fileType === 'docx' || fileType ===
					'xlsx' || fileType === 'xls') {

					let existFile = fileList
						.slice(0, fileList.length - 1)
						.find((f) => f.name === file.name);
					if (existFile) {
						this.$message.error("当前文件已经存在!");
						fileList.pop();
					}
					this.fileList = fileList;
				} else {
					this.$message.error("上传模板只能是jpg,png,doc,docx,xlsx,xls格式!");
					fileList.pop();
					return
				}




			},
			// 上传到服务器  formidable接收
			async submitUpload() {
				// var _this = this
				// // 上传文件大小不能超过100MB!
				// const isLt100M = this.fileList.every(
				// 	(file) => file.size / 1024 / 1024 < 100
				// );
				let formData = new FormData();
				//注意此处是item.raw，如果直接使用files，那么不会有数据传输到后端
				this.fileList.forEach((item) => {
					formData.append("files", item.raw);
				});

				// 新建到数据表中
				// formData.append("add_id", add_id);
				//这里的xxxx是自己的后端上传地址
				//此处的formData不要加花括号｛｝，不然无法传输数据
				axios
					.post("http://localhost:8080/house/uploadPicture", formData, {
						headers: {
							"token": store.getters.token,
						}
					})
					.then(res => {
						console.log(res)
					})
					.catch(error => {
					})

			},
			// 点击文件进行下载
			downLoadFile(file) {
				var a = document.createElement("a");
				var event = new MouseEvent("click");
				a.download = file.name;
				a.href = file.url;
				a.dispatchEvent(event);
			},

			// 解析路径
			getFileName(path) {
				var pos1 = path.lastIndexOf('/');
				var pos2 = path.lastIndexOf('\\');
				var pos = Math.max(pos1, pos2);
				if (pos < 0)
					return path;
				else
					return path.substring(pos + 1);
			}








		},








	}
</script>

<!-- <script>
	import axios from 'axios'
	import store from '@/store'
	export default {
		data() {
			return {
				fileList: [],
				headers: {
					token: store.getters.token, //headers属性中添加token，这个属性是el-upload自带的用来设置上传请求头部
					houseId: 0
				},
			};
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleSuccess(res, file, fileList) {
				if (res.code === 1) {
					console.log(res.msg)
				} else {
					this.$message.error(res.msg);
				}
			},
			// 上传到服务器  formidable接收
			async submitHouse() {
				var _this = this
				// 上传文件大小不能超过100MB!
				const isLt100M = this.fileList.every(
					(file) => file.size / 1024 / 1024 < 100
				);
				let formData = new FormData();
				//注意此处是item.raw，如果直接使用files，那么不会有数据传输到后端
				console.log(this.fileList)
				this.fileList.forEach((item) => {
					formData.append("files", item.raw);
				});
				console.log(formData)
				// 新建到数据表中
				// formData.append("add_id", add_id);
				//这里的xxxx是自己的后端上传地址
				//此处的formData不要加花括号｛｝，不然无法传输数据
				axios
					.post("http://localhost:8080/house/testUpload", formData, {
						headers: {
							"token": store.getters.token,
							"Content-Type": "multipart/form-data"
						}
					})
					.then(res => {
						console.log(res)
					})

			},
		}
	}
</script> -->

<style>
</style>
